<template>
	<div class="Administrator">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }"><i class="lh lh-diaodu fw_100"></i></el-breadcrumb-item>
			<el-breadcrumb-item>供应商</el-breadcrumb-item>
			<el-breadcrumb-item>账号管理</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="content_Box box-shadow abnormal mt_15">
			<div class="py_5 px_10">
				<el-row>
					<el-col :span="2">
						<el-button type="success" class="fl" @click="addAdministrator()" round size="mini">新增账号</el-button>
					</el-col>
					<el-col :span="22">
						<el-form :inline="true" class="form-inline fr" @keyup.enter.native="shearchBtn()">
							<el-form-item>
								<el-select v-model="query.supplier_sn" filterable placeholder="请选择供应商" clearable>
									<el-option
										v-for="item in supplierList"
										:key="item.id"
										:label="item.name"
										:value="item.sn"
									></el-option>
								</el-select>
							</el-form-item>
							<el-form-item class="w_80">
								<el-select v-model="query.status" placeholder="账号状态" clearable>
									<el-option label="正常" value="1"></el-option>
									<el-option label="停用" value="2"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item class="w_100">
								<el-input v-model="query.mobile" placeholder="手机号"></el-input>
							</el-form-item>
							<el-form-item class="w_80">
								<el-input v-model="query.name" placeholder="姓名"></el-input>
							</el-form-item>
							<el-form-item class="w_100">
								<el-input v-model="query.creater_name" placeholder="创建人"></el-input>
							</el-form-item>
							<el-form-item prop="start_time">
								<el-date-picker
									class="w_180i"
									v-model="query.start_time"
									type="datetime"
									value-format="yyyy-MM-dd HH:mm:ss"
									format="yyyy-MM-dd HH:mm:ss"
									default-time="00:00:00"
									placeholder="创建开始时间"
								>
								</el-date-picker> </el-form-item
							>~
							<el-form-item prop="end_time">
								<el-date-picker
									class="w_180i"
									v-model="query.end_time"
									type="datetime"
									value-format="yyyy-MM-dd HH:mm:ss"
									format="yyyy-MM-dd HH:mm:ss"
									default-time="23:59:59"
									placeholder="创建结束时间"
								>
								</el-date-picker>
							</el-form-item>

							<el-button size="mini" type="primary" class="round-right" native-type="button" @click="shearchBtn()"
								>搜索</el-button
							>
							<el-button size="mini" round @click="resetDataBtn()">重置</el-button>
						</el-form>
					</el-col>
				</el-row>
			</div>
			<div class="tableMaxBox">
				<template>
					<!-- 表格部分 -->
					<el-table :data="list" stripe>
						<el-table-column prop="id" label="序号" width="50px" align="center">
							<template slot-scope="{ $index }">
								<span>{{ $index + 1 }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="mobile" label="手机号"></el-table-column>
						<el-table-column prop="name" label="姓名"></el-table-column>
						<el-table-column prop="supplier_name" label="所属供应商"></el-table-column>
						<el-table-column label="账号状态">
							<template slot-scope="{ row }">
								<span class="text-color-success" v-if="row.status == 1">正常</span>
								<span class="text-color-error" v-if="row.status == 2">停用</span>
							</template>
						</el-table-column>
						<el-table-column prop="add_time" label="创建日期"> </el-table-column>
						<el-table-column prop="creater_name" label="创建人"></el-table-column>

						<el-table-column label="操作" fixed="right" width="100px">
							<template slot-scope="{ row }">
								<el-link :underline="false" type="primary" @click="editAdmin(row)">编辑</el-link>
								<el-link :underline="false" type="danger" v-if="row.status == 1" @click="userDisable(row)"
									>停用</el-link
								>
								<el-link :underline="false" type="success" v-if="row.status == 2" @click="userDisable(row)"
									>启用</el-link
								>
							</template>
						</el-table-column>
					</el-table>
					<!-- 分页组件 -->
					<page :total="total" :pageNums="pageNum" :disableMountedFetch="true" @pagedata="onChildValue"></page>
				</template>
			</div>
		</div>
		<!-- 添加账号 -->
		<el-dialog :title="dialogTitle" :visible.sync="administratorAddShow" width="550px" :before-close="handleClose">
			<div class="dialog">
				<div class="clear">
					<div class="fl key"><span class="text-color-error">*</span> 姓名</div>
					<div class="fl"><el-input v-model="form.name" placeholder="请输入姓名"></el-input></div>
				</div>
				<div class="clear">
					<div class="fl key"><span class="text-color-error">*</span> 手机号</div>
					<div class="fl"><el-input v-model="form.mobile" placeholder="请输入手机号"></el-input></div>
				</div>
				<div class="clear">
					<div class="fl key"><span class="text-color-error">*</span> 所属供应商</div>
					<div class="fl">
						<el-select v-model="form.supplier_sn" filterable placeholder="请选择供应商" clearable>
							<el-option v-for="item in supplierList" :key="item.id" :label="item.name" :value="item.sn"></el-option>
						</el-select>
					</div>
				</div>
			</div>
			<div slot="footer" class="dialog-footer clear">
				<el-button @click="handleClose()">取 消</el-button>
				<el-button type="primary" @click="submitForm()">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import {
	fetchSupplierList,
	supplierUserFetchList,
	supplierUserFetchInfo,
	supplierUserCreate,
	supplierUserSetInfo,
	supplierUserDisable
} from '@/api/supplier.js'

import { fetchCityList } from '@/api/city.js'

export default {
	name: 'Administrator',
	data() {
		return {
			administratorAddShow: false,
			list: [],
			supplierList: [],
			dialogTitle: '添加账号',
			query: {
				supplier_sn: '',
				status: '',
				mobile: '',
				name: '',
				creater_id: '',
				creater_name: '',
				start_time: '',
				end_time: ''
			},

			//向分页组件传值
			total: 0,
			pageNum: 1,
			pageSizeNow: 20,

			// 添加账号
			form: {
				sn: '',
				name: '',
				mobile: '',
				supplier_sn: ''
			}
		}
	},
	async mounted() {
		// supplier_sn  供应商列表进入
		const { supplier_sn } = this.$route.query
		this.query.supplier_sn = supplier_sn || ''

		await this.fetchSupplierList()
		await this.listData()
	},
	methods: {
		async listData() {
			try {
				let { supplier_sn, ...query } = this.query
				if (supplier_sn == '') {
					let arr = []
					this.supplierList.forEach(item => {
						arr.push(item.sn)
					})
					supplier_sn = arr.toString()
				}
				let ret = await supplierUserFetchList({
					pageSize: this.pageSizeNow,
					page: this.pageNum,
					...this.query,
					supplier_sn
				})
				// console.log(ret)
				this.list = ret.list
				this.total = ret.count
			} catch (err) {
				// console.log('err:', err)
			}
		},

		shearchBtn() {
			this.pageNum = 1
			this.listData()
		},
		// 清空筛选项
		resetDataBtn() {
			for (let key in this.query) this.query[key] = ''
			this.pageNum = 1
			this.listData()
		},
		// 新增账号 打开
		addAdministrator() {
			this.administratorAddShow = true
		},
		// 点击编辑账号
		editAdmin(row) {
			for (let key in row) {
				for (let it in this.form) {
					if (key == it) {
						this.form[it] = row[key]
					}
				}
			}
			this.administratorAddShow = true
			this.dialogTitle = '编辑账号'
		},
		// 关闭添加账号
		handleClose() {
			for (let key in this.form) this.form[key] = ''
			this.administratorAddShow = false
			this.dialogTitle = '添加账号'
		},
		// 添加账号
		async submitForm() {
			try {
				if (this.form.name == '' || this.form.mobile == '' || this.form.supplier_sn == '') {
					return this.$message.error('请输入必填项')
				}
				if (this.dialogTitle == '添加账号') {
					await supplierUserCreate({
						name: this.form.name,
						mobile: this.form.mobile,
						supplier_sn: this.form.supplier_sn
					})
				} else {
					await supplierUserSetInfo({
						sn: this.form.sn,
						name: this.form.name,
						mobile: this.form.mobile,
						supplier_sn: this.form.supplier_sn
					})
				}
				this.$message.success(`${this.dialogTitle == '添加账号' ? '添加' : '编辑'}成功`)
				this.handleClose()
				this.listData()
			} catch (err) {
				console.log(err)
			}
		},

		// 停用/启用
		async userDisable(row) {
			console.log(row)
			try {
				await this.$confirm(`确认要 ${row.status == 1 ? '停用' : '启用'} ${row.name}, 是否继续?`, {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				})
				await supplierUserDisable({
					sn: row.sn,
					status: row.status == 1 ? 2 : 1
				})
				this.listData()
			} catch (err) {
				console.log(err)
			}
		},

		//分页组件->子组件传值
		onChildValue(item) {
			this.pageNum = item[0]
			this.pageSizeNow = item[1]
			this.listData()
		},
		async fetchSupplierList() {
			try {
				let city_arr = await fetchCityList()
				// console.log(city_arr)
				let ret = await fetchSupplierList({
					fields: 'name,sn,id',
					city_id: city_arr.list[0].id
				})
				// console.log(ret)
				this.supplierList = ret.list
			} catch (err) {
				console.log('err:', err)
			}
		}
	}
}
</script>

<style scoped>
.text-color-success {
	color: #70b603;
}
.text-color-error {
	color: #d40505;
}
.dialog .key {
	width: 90px;
	text-align: right;
	margin-right: 10px;
	line-height: 30px;
}
.dialog .clear {
	margin-bottom: 15px;
}
</style>
<style>
.tableMaxBox .el-table th .el-checkbox__input {
	display: block;
}
.dialog .el-input {
	width: 300px;
}
</style>



// WEBPACK FOOTER //
// src/components/supplier/Administrator.vue